// 柱状图1模块
(function() {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"), null, {
        width: 420,
        height: 200
    });
    // 指定配置和数据
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['风速', '数字气压']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                // prettier-ignore
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '风速',
                type: 'bar',
                data: [
                    108, 60.9, 27.0, 103.2, 135.6, 156.7, 125.6
                ],


            },
            {
                name: '数字气压',
                type: 'bar',
                data: [
                    127, 75.9, 39.0, 116.4, 168.7, 170.7, 155.6
                ],

            }
        ]
    };
    // var option = {
    //     color: ["#2f89cf"],
    //     tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //             // 坐标轴指示器，坐标轴触发有效
    //             type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
    //         }
    //     },
    //     grid: {
    //         left: "0%",
    //         top: "10px",
    //         right: "0%",
    //         bottom: "4%",
    //         containLabel: true
    //     },
    //     xAxis: [
    //         {
    //             type: "category",
    //             data: [
    //                 "1.6",
    //                 "1.7",
    //                 "1.8",
    //                 "1.9",
    //                 "1.10",
    //                 "1.11",
    //                 "1.12"
    //             ],
    //             axisTick: {
    //                 alignWithLabel: true
    //             },
    //             axisLabel: {
    //                 textStyle: {
    //                     color: "rgba(0,0,0,.6)",
    //                     fontSize: "12"
    //                 }
    //             },
    //             axisLine: {
    //                 show: false
    //             }
    //         }
    //     ],
    //     yAxis: [
    //         {
    //             type: "value",
    //             axisLabel: {
    //                 textStyle: {
    //                     color: "rgba(0,0,0,.6)",
    //                     fontSize: "12"
    //                 }
    //             },
    //             axisLine: {
    //                 lineStyle: {
    //                     color: "rgba(0,0,0,.1)"
    //                     // width: 1,
    //                     // type: "solid"
    //                 }
    //             },
    //             splitLine: {
    //                 lineStyle: {
    //                     color: "rgba(0,0,0,.1)"
    //                 }
    //             }
    //         }
    //     ],
    //     series: [
    //         {
    //             name: "风速速度",
    //             type: "bar",
    //             barWidth: "35%",
    //             data: [200, 300, 300, 900, 1500, 1200, 600],
    //             itemStyle: {
    //                 barBorderRadius: 5
    //             }
    //         }
    //     ]
    // };

    // 把配置给实例对象
    myChart.setOption(option);


    window.addEventListener("resize", function() {
        myChart.resize();
    });

    // // 数据变化
    // var dataAll = [
    //     { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
    //     { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
    // ];
    //
    // $(".bar h2 ").on("click", "a", function() {
    //     option.series[0].data = dataAll[$(this).index()].data;
    //     myChart.setOption(option);
    // });
    window.onresize = function () {
        myChart.resize();
    }
})();

// 折线图定制
(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".line .chart"), null, {
        width: 420,
        height: 200
    });

    // (1)准备数据

    // 2. 指定配置和数据
    // var option = {
    //     color: ["#00f2f1", "#ed3f35"],
    //     tooltip: {
    //         // 通过坐标轴来触发
    //         trigger: "axis"
    //     },
    //     legend: {
    //         // 距离容器10%
    //         right: "10%",
    //         // 修饰图例文字的颜色
    //         textStyle: {
    //             color: "#000000"
    //         }
    //         // 如果series 里面设置了name，此时图例组件的data可以省略
    //         // data: ["邮件营销", "联盟广告"]
    //     },
    //     grid: {
    //         top: "20%",
    //         left: "3%",
    //         right: "4%",
    //         bottom: "3%",
    //         show: true,
    //         borderColor: "#012f4a",
    //         containLabel: true
    //     },
    //
    //     xAxis: {
    //         type: "category",
    //         boundaryGap: false,
    //         data: [
    //             "1月",
    //             "2月",
    //             "3月",
    //             "4月",
    //             "5月",
    //             "6月",
    //             "7月",
    //             "8月",
    //             "9月",
    //             "10月",
    //             "11月",
    //             "12月"
    //         ],
    //         // 去除刻度
    //         axisTick: {
    //             show: false
    //         },
    //         // 修饰刻度标签的颜色
    //         axisLabel: {
    //             color: "rgba(0,0,0,.7)"
    //         },
    //         // 去除x坐标轴的颜色
    //         axisLine: {
    //             show: false
    //         }
    //     },
    //     yAxis: {
    //         type: "value",
    //         // 去除刻度
    //         axisTick: {
    //             show: false
    //         },
    //         // 修饰刻度标签的颜色
    //         axisLabel: {
    //             color: "rgba(0,0,0,.7)"
    //         },
    //         // 修改y轴分割线的颜色
    //         splitLine: {
    //             lineStyle: {
    //                 color: "#000000"
    //             }
    //         }
    //     },
    //     series: [
    //         {
    //             name: "土壤温度",
    //             type: "line",
    //             stack: "总量",
    //             // 是否让线条圆滑显示
    //             smooth: true,
    //             data: data.year[0]
    //         },
    //         {
    //             name: "土壤湿度",
    //             type: "line",
    //             stack: "总量",
    //             smooth: true,
    //             data: data.year[1]
    //         }
    //     ]
    // };
    // 3. 把配置和数据给实例对象
    option = {

        tooltip: {
            trigger: 'axis'
        },
        legend: {},
        toolbox: {
            show: true,
            feature: {
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        series: [
            {
                name: '大气温度',
                type: 'line',
                data: [10, 11, 13, 11, 12, 12, 9],
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },

            },
            {
                name: '土壤温度',
                type: 'line',
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                },
                markLine: {
                    data: [
                        { type: 'average', name: 'Avg' },
                        [
                            {
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            },
                            {
                                symbol: 'circle',
                                label: {
                                    position: 'start',
                                    formatter: 'Max'
                                },
                                type: 'max',
                                name: '最高点'
                            }
                        ]
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);

    // 重新把配置好的新数据给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
    window.onresize = function () {
        myChart.resize();
    }
})();

// 饼形图定制
// 折线图定制
(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".pie .chart"));

    option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['最高雨量', '最低雨量']
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [

            {
                name: '最高雨量',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(0, 221, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(77, 119, 255)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 282, 111, 234, 220, 340, 310]
            },
            {
                name: '最低雨量',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(55, 162, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(116, 21, 219)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 132, 201, 334, 190, 130, 220]
            },

        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
    window.onresize = function () {
        myChart.resize();
    }
})();
// 学习进度柱状图模块
(function() {
    var app = {};
    var chartDom = document.getElementById('fushe');
    var myChart = echarts.init(chartDom, {
        width: 236,
        height: 87
    });
    var option;

    const categories = (function () {
        let now = new Date();
        let res = [];
        let len = 10;
        while (len--) {
            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
            now = new Date(+now - 2000);
        }
        return res;
    })();
    const categories2 = (function () {
        let res = [];
        let len = 10;
        while (len--) {
            res.push(10 - len - 1);
        }
        return res;
    })();
    const data = (function () {
        let res = [];
        let len = 10;
        while (len--) {
            res.push(Math.round(Math.random() * 20));
        }
        return res;
    })();
    const data2 = (function () {
        let res = [];
        let len = 0;
        while (len < 10) {
            res.push(+(Math.random() * 100 + 5).toFixed(1));
            len++;
        }
        return res;
    })();
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {},
        toolbox: {
            show: true,
            feature: {

                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: categories
            },
            {
                type: 'category',
                boundaryGap: true,
                data: categories2
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: '湿度',
                max: 100,
                min: 0,
                boundaryGap: [0.2, 0.2]
            },
            {
                type: 'value',
                scale: true,
                name: '温度',
                max: 50,
                min: -50,
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [
            {
                name: '当前温度',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data
            },
            {
                name: '当前湿度',
                type: 'line',
                data: data2
            }
        ]
    };
    app.count = 11;
    setInterval(function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
        data.shift();
        data.push(Math.round(Math.random() * 20));
        data2.shift();
        data2.push(+(Math.random() * 100 + 5).toFixed(1));
        categories.shift();
        categories.push(axisData);
        categories2.shift();
        categories2.push(app.count++);
        myChart.setOption({
            xAxis: [{data: categories},
                    {data: categories2}],
            series: [{data: data},
                    {data: data2}]});}, 1100);

    option && myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
    // // 基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    //
    // var data = [70, 34, 60, 78, 69];
    // var titlename = ["强辐射", "中等辐射", "弱辐射", "低辐射", "无辐射"];
    // var valdata = [702, 350, 610, 793, 664];
    // var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // myChart.showLoading();
    // // 定义x、y轴数据数组
    // var names=[];
    // var nums1=[];
    // var nums2=[];
    // //请求后台数据
    // $.ajax({
    //     type : "post",
    //     async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    //     url : "/languages/languageJSON",    //请求发送到dataActiont处
    //     data : {},
    //     dataType : "json",        //返回数据形式为json
    //     success : function(result) {
    //         //请求成功时执行该函数内容，result即为服务器返回的json对象
    //         if (result) {
    //             for (var i = 0; i < result.length; i++) {
    //                 names.push(result[i].name);
    //                 nums1.push(result[i].onedata);
    //                 nums2.push(result[i].twodata);
    //             }
    //             myChart.hideLoading();    //隐藏加载动画
    //             myChart.setOption({
    //                 //图标位置
    //                 grid: {
    //                     top: "10%",
    //                     left: "22%",
    //                     bottom: "10%"
    //                 },
    //                 xAxis: {
    //                     show: false
    //                 },
    //                 yAxis: [
    //                     {
    //                         show: true,
    //                         data: names,
    //                         inverse: true,
    //                         axisLine: {
    //                             show: false
    //                         },
    //                         splitLine: {
    //                             show: false
    //                         },
    //                         axisTick: {
    //                             show: false
    //                         },
    //                         axisLabel: {
    //                             color: "#000000",
    //
    //                             rich: {
    //                                 lg: {
    //                                     backgroundColor: "#339911",
    //                                     color: "#000000",
    //                                     borderRadius: 15,
    //                                     // padding: 5,
    //                                     align: "center",
    //                                     width: 15,
    //                                     height: 15
    //                                 }
    //                             }
    //                         }
    //                     },
    //                     {
    //                         show: true,
    //                         inverse: true,
    //                         data: nums2,
    //                         axisLabel: {
    //                             textStyle: {
    //                                 fontSize: 12,
    //                                 color: "#000000"
    //                             }
    //                         }
    //                     }
    //                 ],
    //                 series: [
    //                     {
    //                         name: "条",
    //                         type: "bar",
    //                         yAxisIndex: 0,
    //                         data: nums1,
    //                         barCategoryGap: 50,
    //                         barWidth: 10,
    //                         itemStyle: {
    //                             normal: {
    //                                 barBorderRadius: 20,
    //                                 color: function(params) {
    //                                     var num = myColor.length;
    //                                     return myColor[params.dataIndex % num];
    //                                 }
    //                             }
    //                         },
    //                         label: {
    //                             normal: {
    //                                 show: true,
    //                                 position: "inside",
    //                                 formatter: "{c}%"
    //                             }
    //                         }
    //                     },
    //                     {
    //                         name: "框",
    //                         type: "bar",
    //                         yAxisIndex: 1,
    //                         barCategoryGap: 50,
    //                         data: [100, 100, 100, 100, 100],
    //                         barWidth: 15,
    //                         itemStyle: {
    //                             normal: {
    //                                 color: "none",
    //                                 borderColor: "#00c1de",
    //                                 borderWidth: 3,
    //                                 barBorderRadius: 15
    //                             }
    //                         }
    //                     }
    //                 ]
    //             })
    //         }
    //     },
    //     error : function(errorMsg) {
    //         //请求失败时执行该函数
    //         alert("图表请求数据失败!");
    //         myChart.hideLoading();
    //     }
    //
    //
    // });
    //
    //
    //
    // // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);
    // window.addEventListener("resize", function() {
    //     myChart.resize();
    // });
})();


// 折线图 优秀作品
(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".line1 .chart"));

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['大气温度', '土壤温度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                restore: { show: true },
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '大气温度',
                type: 'line',
                stack: 'Total',
                data: [14, 24, 5, 34, 9, 23, 21]
            },
            {
                name: '土壤温度',
                type: 'line',
                stack: 'Total',
                data: [5, 10, -11.7, -11.7, -5.7, -16.7,-14.6]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

// 点位分布统计模块
(function() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie1  .chart"));
    // 2. 指定配置项和数据
    var option = {
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(0,0,0,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} (Lux)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
                name: "光照强度",
                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "70%"],
                center: ["50%", "42%"],
                roseType: "radius",
                data: [
                    { value: 20, name: "室内1" },
                    { value: 26, name: "室外3" },
                    { value: 24, name: "室外2" },
                    { value: 25, name: "室外1" },
                    { value: 20, name: "室内2" },
                    { value: 25, name: "大棚3" },
                    { value: 30, name: "大棚2" },
                    { value: 42, name: "大棚1" }
                ],
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 10,
                    // 连接到文字的线长度
                    length2: 10
                }
            }
        ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

//four1
(function () {
    var chartDom = document.getElementById('four1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '当前温度',
            x:'center',
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                progress: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    textStyle:{

                        fontSize:20

                    },
                },
                min: -20,				// 最小的数据值,默认 0 。映射到 minAngle。
                max: 100,				// 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 4,		// 仪表盘刻度的分割段数,默认 10。
                data: [
                    {
                        value: 17.1,
                        name: '℃',

                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);

// 数据变化
    var dataAll = [
        { year: "室内", data: [17.1] },
        { year: "室外", data: [20.7] },
        { year: "大棚", data: [30.7] }
    ];

    $(".bar h2 ").on("click", "a", function() {
        option.series[0].data = dataAll[$(this).index()].data;
        myChart.setOption(option);
    });






})();
//2
(function () {
    var chartDom = document.getElementById('four2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '当前湿度',
            x:'center',
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                progress: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    textStyle:{

                        fontSize:20

                    },
                },
                data: [
                    {
                        value: 78.8,
                        name: '%RH'
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);

    var dataAll = [
        { year: "室内", data: [78.8] },
        { year: "室外", data: [65.5] },
        { year: "大棚", data: [30.7] }
    ];

    $(".bar h2 ").on("click", "a", function() {
        option.series[0].data = dataAll[$(this).index()].data;
        myChart.setOption(option);
    });


})();
//3
(function () {
    var chartDom = document.getElementById('four3');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '当前风速',
            x:'center',
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                min: 0,				// 最小的数据值,默认 0 。映射到 minAngle。
                max: 20,				// 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 4,		// 仪表盘刻度的分割段数,默认 10。
                progress: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    textStyle:{

                        fontSize:20

                    },
                },
                data: [
                    {
                        value: 1.7,
                        name: 'm/s'
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);


    var dataAll = [
        { year: "室内", data: [1.7] },
        { year: "室外", data: [4.8] },
        { year: "大棚", data: [30.7] }
    ];

    $(".bar h2 ").on("click", "a", function() {
        option.series[0].data = dataAll[$(this).index()].data;
        myChart.setOption(option);
    });



})();
//4
(function () {
    var chartDom = document.getElementById('four4');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '当前照度',
            x:'center',
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                min: 0,				// 最小的数据值,默认 0 。映射到 minAngle。
                max: 5000,				// 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 5,		// 仪表盘刻度的分割段数,默认 10。
                progress: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    textStyle:{

                        fontSize:20

                    },
                },
                data: [
                    {
                        value: 0,
                        name: 'Lux'
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);



    var dataAll = [
        { year: "室内", data: [0] },
        { year: "室外", data: [1000] },
        { year: "大棚", data: [30.7] }
    ];

    $(".bar h2 ").on("click", "a", function() {
        option.series[0].data = dataAll[$(this).index()].data;
        myChart.setOption(option);
    });



})();


